<template>
  <div class="global-warming">
    <el-scrollbar max-height="700px" noresize>
      <MainTitle>全球变暖</MainTitle>
      <Paragraph>
        根据世界气象组织（WMO）的数据，2023年全球平均温度比工业化前水平高出约1.31摄氏度。
        <br />
        2016-2020年，这五年是有记录以来最热的五年。2016年是有记录以来最热的一年，全球平均温度比工业化前水平高出1.2摄氏度。
      </Paragraph>

      <Title id="1">全球变暖出现哪些危害？</Title>
      <Subheading>极端天气事件</Subheading>
      <Paragraph>
        2021年7月，德国、比利时、荷兰等欧洲国家遭受严重洪水袭击，造成至少200人死亡，直接经济损失超过数十亿欧元。
        <br />
        2016-2020年，这五年是有记录以来最热的五年。2016年是有记录以来最热的一年，全球平均温度比工业化前水平高出1.2摄氏度。
        <br />
        2023年7月，北半球多地经历了历史性的高温天气，美国、加拿大、欧洲等地的气温普遍超过40°C，一些地方甚至达到了45°C以上。
      </Paragraph>

      <Subheading>冰川和海冰融化</Subheading>
      <Paragraph>
        2020年9月，北极海冰面积降至338万平方千米，是有记录以来第二低的水平。
        <br />
        2021年7月，格陵兰冰盖经历了罕见的大规模融化事件，一天内融化的水量足以填满720万个奥运会标准游泳池。
      </Paragraph>

      <Subheading>海平面上升</Subheading>
      <Paragraph>
        根据NASA的数据，2013年以来，全球海平面平均每年上升4.4毫米，而在1993年至2013年的20年间，这一速度为每年2.2毫米。
        <br />
        IPCC（政府间气候变化专门委员会）预测，到2100年，全球海平面可能上升0.6至1.1米。
      </Paragraph>

      <Subheading>生态系统影响</Subheading>
      <Paragraph>
        2016年和2017年，澳大利亚大堡礁连续两年发生大规模白化事件，约50%的珊瑚死亡。
        <br />
        据《自然》杂志报道，由于气候变化，全球约有100万种动植物面临灭绝的风险。
      </Paragraph>

      <Subheading>社会经济影响</Subheading>
      <Paragraph>
        根据联合国粮农组织的数据，2020年，全球约有7.5亿人面临饥饿，其中气候变化是主要因素之一。
        <br />
        2020年，全球自然灾害造成的直接经济损失超过2500亿美元，其中大部分损失由极端天气事件引起。
      </Paragraph>
      <Image img="../../../assets/science/earth.jpg" des="图8 拯救地球" />

      <Title id="2">国际应对措施有哪些？</Title>
      <Paragraph>
        《巴黎协定》：截至2023年，已有196个国家和地区加入了《巴黎协定》，承诺将全球平均温度升幅控制在2°C以内，并努力限制在1.5°C以内。
        <br />
        中国：承诺2060年前实现碳中和，2030年前达到碳排放峰值。
        <br />
        欧盟：计划2050年实现碳中和，2030年减排55%（相对于1990年水平）。
        <br />
        美国：重新加入《巴黎协定》，承诺2050年实现净零排放。
      </Paragraph>
      <Image img="../../../assets/science/PolarBear-one.jpg" des="图9 融化的北极" />

      <div class="left-and-right">
        <LeftOrRightButton
          :obj="{
            direction: 1,
            text: '中国的贡献有哪些？',
            path: '/science/chinacontribution',
          }"
        ></LeftOrRightButton>
        <LeftOrRightButton
          :obj="{ direction: 1, text: '' }"
          style="visibility: hidden"
        ></LeftOrRightButton>
      </div>
    </el-scrollbar>

    <!-- 侧栏导航 -->
    <AsideNavigation>
      <div class="main-title">全球变暖</div>
      <a href="#1">全球变暖出行哪些危害？</a>
      <a href="#2">国际应对措施有哪些？</a>
    </AsideNavigation>
  </div>
</template>

<script setup>
import MainTitle from '../components/MainTitle.vue'
import Title from '../components/Title.vue'
import Paragraph from '../components/Paragraph.vue'
import Subheading from '../components/Subheading.vue'
import AsideNavigation from '../Layout/AsideNavigation.vue'
import LeftOrRightButton from '../components/LeftOrRightButton.vue'
import Image from '../components/Image.vue'
</script>

<style less="scss">
.global-warming {
  display: flex;
  .left-and-right {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 150px;
  }
}
</style>
